@import url(./vars.less);

:root {
    --theme-dark-color     : rgb(53, 53, 53);
    --theme-dark-font-color: rgba(238, 238, 238, 0.808);
}

body.theme-dark {
    background-color: var(--theme-dark-color);

    & * {
        color: var(--theme-dark-font-color) !important;
    }
    #play *{
        color: #233 !important;
    }

    @media (max-width:@mobile-width) {
        header .nav-top .nav {
            background-color: rgba(34, 51, 51, 0.795);
        }
    }
    header .nav-top .search .search-box.block{
        background: none;
        background-color: rgb(26, 31, 31);
    }

    main a {
        color: #c5fdffcb !important;
    }

    code,
    pre {
        color           : #233 !important;
        background-color: rgb(206, 206, 206) !important;
    }

    form input,
    form textarea {
        background-color: #233 !important;
    }

    header {
        nav.nav-top.nav-top:hover {
            background-color: rgba(0, 0, 0, 0.82);
            box-shadow      : 0 1px 5px 1px rgba(255, 255, 255, 0.3);
        }

        nav.nav-top.show {
            transition      : 1s;
            background-color: rgba(0, 0, 0, 0.82);
            box-shadow      : 0 1px 10px 1px rgba(255, 255, 255, 0.24);
        }

        .nav-top {
            &.top-show {
                background-color: rgba(0, 0, 0, 0.82);
                box-shadow      : 0 1px 5px 1px rgba(255, 255, 255, 0.1);
            }
        }

        .center-video {
            &::after {
                background-color: rgba(0, 0, 0, 0.3);
            }
        }
    }

    main {
        background-color: rgba(0, 0, 0, 0.62);

        .focus {
            .focus-item {
                box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.2);

                &:hover {
                    box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.8);
                }

                .focus-bg {
                    filter: grayscale(50%);
                }
            }
        }

        .post {
            .post-item {
                box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.2);

                &:hover {
                    box-shadow: 0 0 15px 2px rgba(255, 255, 255, 0.54);
                }

                .picture {
                    filter: grayscale(50%);
                }
            }
        }
    }

    #cd-top {
        img {
            filter: grayscale(50%);
        }
    }

    #theme {
        background-color: rgba(20, 20, 20, 0.8);

        .theme-box {
            background-color: rgba(34, 34, 34, 0.9);

            &::after {
                background-color: rgba(34, 34, 34, 0.9);
            }
        }
    }

}

body.theme-bronya {
    background-image: url(../img/bbb.jpg);
    @media (min-width:@mobile-width+500px) {
        header {
            width: var(--base-width);
        }
    }
    
}